{% extends 'adminuser/base_admin.html' %}

{% block admin_title %}故事管理{% endblock %}

{% block admin_content %}
<div class="d-flex justify-content-between mb-3">
    <h5>故事总数: {{ total_stories }}</h5>
    <div>
        <form class="d-flex" method="get">
            <div class="input-group me-2">
                <input type="text" name="search" class="form-control" placeholder="搜索故事..." value="{{ search_query }}">
                <button type="submit" class="btn btn-outline-primary">
                    <i class="bi bi-search"></i>
                </button>
            </div>
            <select name="is_draft" class="form-select me-2" onchange="this.form.submit()">
                <option value="" {% if selected_is_draft == '' %}selected{% endif %}>全部状态</option>
                <option value="false" {% if selected_is_draft == 'false' %}selected{% endif %}>已发布</option>
                <option value="true" {% if selected_is_draft == 'true' %}selected{% endif %}>草稿</option>
            </select>
            <select name="category" class="form-select" onchange="this.form.submit()">
                <option value="" {% if selected_category == '' %}selected{% endif %}>全部分类</option>
                {% for category in categories %}
                <option value="{{ category.id }}" {% if selected_category == category.id %}selected{% endif %}>{{ category.name }}</option>
                {% endfor %}
            </select>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-header bg-light">
        <div class="row">
            <div class="col-md-4">标题</div>
            <div class="col-md-2">作者</div>
            <div class="col-md-2">分类</div>
            <div class="col-md-2">状态</div>
            <div class="col-md-2">操作</div>
        </div>
    </div>
    <div class="card-body p-0">
        <div class="list-group list-group-flush">
            {% for story in page_obj %}
            <div class="list-group-item">
                <div class="row align-items-center">
                    <div class="col-md-4">
                        <h6 class="mb-1">{{ story.title }}</h6>
                        <small class="text-muted">
                            {{ story.created_at|date:"Y-m-d H:i" }} | 
                            浏览: {{ story.views }} | 
                            点赞: {{ story.likes }}
                        </small>
                    </div>
                    <div class="col-md-2">
                        <a href="{% url 'adminuser:user_detail' user_id=story.author.id %}">
                            {{ story.author.username }}
                        </a>
                    </div>
                    <div class="col-md-2">
                        <span class="badge bg-info">{{ story.category.name }}</span>
                    </div>
                    <div class="col-md-2">
                        {% if story.is_draft %}
                        <span class="badge bg-warning">草稿</span>
                        {% else %}
                        <span class="badge bg-success">已发布</span>
                        {% endif %}
                    </div>
                    <div class="col-md-2">
                        <a href="{% url 'story:detail' pk=story.id %}" target="_blank" class="btn btn-sm btn-outline-primary">
                            <i class="bi bi-eye"></i> 查看
                        </a>
                        <button type="button" class="btn btn-sm btn-outline-danger" data-bs-toggle="modal" data-bs-target="#deleteStoryModal{{ story.id }}">
                            <i class="bi bi-trash"></i> 删除
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 删除故事确认模态框 -->
            <div class="modal fade" id="deleteStoryModal{{ story.id }}" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">确认删除</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <p>您确定要删除故事 "{{ story.title }}" 吗？该操作不可撤销。</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                            <form action="{% url 'adminuser:delete_story' story_id=story.id %}" method="post" class="d-inline">
                                {% csrf_token %}
                                <button type="submit" class="btn btn-danger">确认删除</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            {% empty %}
            <div class="list-group-item text-center">
                <p class="text-muted my-3">没有找到符合条件的故事</p>
            </div>
            {% endfor %}
        </div>
    </div>
    <div class="card-footer">
        <nav>
            <ul class="pagination justify-content-center mb-0">
                {% if page_obj.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?page=1{% if search_query %}&search={{ search_query }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}{% if selected_is_draft %}&is_draft={{ selected_is_draft }}{% endif %}">首页</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}{% if selected_is_draft %}&is_draft={{ selected_is_draft }}{% endif %}">上一页</a>
                </li>
                {% else %}
                <li class="page-item disabled">
                    <a class="page-link" href="#">首页</a>
                </li>
                <li class="page-item disabled">
                    <a class="page-link" href="#">上一页</a>
                </li>
                {% endif %}
                
                <li class="page-item active">
                    <span class="page-link">{{ page_obj.number }} / {{ page_obj.paginator.num_pages }}</span>
                </li>
                
                {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}{% if selected_is_draft %}&is_draft={{ selected_is_draft }}{% endif %}">下一页</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if search_query %}&search={{ search_query }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}{% if selected_is_draft %}&is_draft={{ selected_is_draft }}{% endif %}">末页</a>
                </li>
                {% else %}
                <li class="page-item disabled">
                    <a class="page-link" href="#">下一页</a>
                </li>
                <li class="page-item disabled">
                    <a class="page-link" href="#">末页</a>
                </li>
                {% endif %}
            </ul>
        </nav>
    </div>
</div>

<div class="row mt-3">
    <div class="col-md-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">故事统计</h5>
                <div class="d-flex justify-content-between align-items-center">
                    <div>总故事数</div>
                    <span class="badge bg-primary">{{ total_stories }}</span>
                </div>
                <div class="d-flex justify-content-between align-items-center mt-2">
                    <div>已发布</div>
                    <span class="badge bg-success">{{ published_stories }}</span>
                </div>
                <div class="d-flex justify-content-between align-items-center mt-2">
                    <div>草稿</div>
                    <span class="badge bg-warning">{{ draft_stories }}</span>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %} 